<!--使用typeNav组件的路由 必须要配name值-->
<template>
  <div class="type-nav" @mouseleave="currentIndex = -2">
    <div class="container" @mouseenter="currentIndex =-1" @mouseleave="allLeave">
      <h2 class="all" @mouseenter="allEnter" >全部商品分类</h2>
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
      <transition name="sort">
        <div class="sort" v-show="showSort">
          <div class="all-sort-list2">
            <!--一级分类-->
            <div class="item" :class="{hover:currentIndex === index1}"
                 @mouseenter="updateCurrentIndex(index1)"
                 v-for="(item1,index1) in categoryList" :key="item1.categoryId"
                 @click="toSearch">
              <h3>
                <a href="javascript:;"
                   :data-category1-id="item1.categoryId"
                   :data-category-name="item1.categoryName">
                  {{item1.categoryName}}
                </a>
                <!--<router-link to="/search">{{item1.categoryName}}</router-link>-->
                <!--<a href="javascript:;" @click="toSearch({categoryName:item1.categoryName,category1Id:item1.categoryId})">
                  {{item1.categoryName}}
                </a>-->
              </h3>
              <!--二三级分类-->
              <div class="item-list clearfix">
                <div class="subitem">
                  <!--二级分类-->
                  <dl class="fore" v-for="item2 in item1.categoryChild" :key="item2.categoryId">
                    <dt>
                      <a href="javascript:;"
                         :data-category2-id="item2.categoryId"
                         :data-category-name="item2.categoryName">
                        {{item2.categoryName}}
                      </a>
                      <!--<router-link to="/search">{{item2.categoryName}}</router-link>-->
                      <!--<a href="javascript:;" @click="toSearch({categoryName:item2.categoryName,category2Id:item2.categoryId})">
                        {{item2.categoryName}}
                      </a>-->
                    </dt>
                    <dd>
                      <!--三级分类-->
                      <em  v-for="item3 in item2.categoryChild" :key="item3.categoryId">
                        <a href="javascript:;"
                           :data-category3-id="item3.categoryId"
                           :data-category-name="item3.categoryName">
                          {{item3.categoryName}}
                        </a>
                        <!--<router-link to="/search">{{item3.categoryName}}</router-link>-->
                        <!--<a href="javascript:;" @click="toSearch({categoryName:item3.categoryName,category3Id:item3.categoryId})">
                          {{item3.categoryName}}
                        </a>-->
                      </em>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  import throttle from "lodash/throttle.js";
  import {mapState} from "vuex";
  export default {
    name: "typeNav",
    data(){
      return {
        //-2: 代表鼠标在这个三级分类的外部
        //-1: 代表鼠标刚刚进入三级分类区域
        //> -1: 代表鼠标已经选中一个一级分类
        currentIndex:-2, //当前鼠标滑到的一级分类 对应的index
        //不同的路由 这个showSort的值要不一样! 当路由为/ 或者/home时 为true; 其他为false
        showSort:this.$route.name.toLowerCase() === "home",
        keyword:"" //同步header中的keyword
      }
    },
    computed:{
      ...mapState({categoryList:state=>state.home.categoryList})
    },
    methods:{
      /* updateCurrentIndex:function (index){
        return _.throttle(()=>{
          this.currentIndex = index;
        },3000)
      }*/

      //updateCurrentIndex:配置项中的方法 这个方法内部的this指向vm实例对象
      updateCurrentIndex:throttle( function (index){
        //设计currentIndex有 -2 -1 >-1  这三个状态; 为了解决快速移入一级分类区域 二三级不显示的bug
        if(this.currentIndex > -2){
          this.currentIndex = index;
        }
      },50),

      //跳转到search组件的编程式导航对应的方法
      toSearch(ev){
        const {categoryName,category1Id,category2Id,category3Id} = ev.target.dataset
        //编程式导航需要的参数对象
        let options = {name:"search",hash:`#${Date.now()}`};
        //query如果有空数据 也不用带
        let query = {};
        categoryName !=="" ? query.categoryName = categoryName : "";
        category1Id !=="" ? query.category1Id = category1Id : "";
        category2Id !=="" ? query.category2Id = category2Id : "";
        category3Id !=="" ? query.category3Id = category3Id : "";
        options.query = query;
        //如果在点击三级分类的时候 地址栏中已经存在了params数据 则需要带上这个params数据
        let params = this.$route.params;
        if(Object.keys(params).length > 0){
          //params不是空对象  但是它避免不了params:{id:""}这种状况
          options.params = params;
        }

        //查看一下 是否还有关键字信息 如果有则带上 ;如果没有则剔除关键字信息
        if(this.keyword){
          options.params.keyword=this.keyword
        }else{
          //说明this.keyword是一个假值; 它可能是"" null undefined false
          if(typeof options.params === "object"){
            /*之前已经存在了params*/
            delete options.params.keyword; //有可能把params删成{}
            if(Object.keys(options.params).length > 0){
              options.params = params;
            }else{
              delete  options.params
            }
          }
        }

        //校验params 是不是拥有数据但数据为空; 如果是这种情况params还是的删掉
        // {a:"",b:"",c:""}
        let arr = [];
        for (let key in options.params){
          arr.push(options.params[key])
        }
        const flag = arr.every((item)=>{return item.trim() === ""})
        //如果flag为true代表 这些值都是""
        if(flag){delete options.params}


        //进行路由跳转
        // 如果是从search跳到search 则使用replace
        if(this.$route.name.toLowerCase() === "search"){
          this.$router.replace(options)
        }else{
          this.$router.push(options)
        }

        //点击完分类 一定要隐藏三级分类!!!!
        this.allLeave();
      },

      //控制一级分类的显示与隐藏效果
      allEnter(){
        //如果当前是/路由 或者/home路由 则return 不能进行显示隐藏的切换
        if(this.$route.name.toLowerCase() === "home") return;
        this.showSort = true;
      },
      allLeave(){
        if(this.$route.name.toLowerCase() === "home") return;
        this.showSort = false;
      },
    },
    mounted() {
      this.$bus.$on("keywordChange",(keyword)=>{
        this.keyword = keyword
      })
    }
  }
</script>

<style scoped lang="less">
  .type-nav {
  border-bottom: 2px solid #e1251b;

  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;

    .all {
      width: 210px;
      height: 45px;
      background-color: #e1251b;
      line-height: 45px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }

    .nav {
      a {
        height: 45px;
        margin: 0 22px;
        line-height: 45px;
        font-size: 16px;
        color: #333;
      }
    }

    .sort {
      position: absolute;
      left: 0;
      top: 45px;
      width: 210px;
      height: 461px;
      position: absolute;
      background: #fafafa;
      z-index: 999;

      .all-sort-list2 {
        .item {
          h3 {
            line-height: 27px;
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            padding: 0 20px;
            margin: 0;

            a {
              color: #333;
            }
          }

          .item-list {
            display: none;
            position: absolute;
            width: 734px;
            min-height: 460px;
            background: #f7f7f7;
            left: 210px;
            border: 1px solid #ddd;
            top: 0;
            z-index: 9999 !important;

            .subitem {
              float: left;
              width: 650px;
              padding: 0 4px 0 8px;

              dl {
                border-top: 1px solid #eee;
                padding: 6px 0;
                overflow: hidden;
                zoom: 1;

                &.fore {
                  border-top: 0;
                }

                dt {
                  float: left;
                  width: 54px;
                  line-height: 22px;
                  text-align: right;
                  padding: 3px 6px 0 0;
                  font-weight: 700;
                }

                dd {
                  float: left;
                  width: 415px;
                  padding: 3px 0 0;
                  overflow: hidden;

                  em {
                    float: left;
                    height: 14px;
                    line-height: 14px;
                    padding: 0 8px;
                    margin-top: 5px;
                    border-left: 1px solid #ccc;
                  }
                }
              }
            }
          }

          /*扩大a标签的热区 damu add*/
          a{
            display: block;
            width: 100%;
          }

          &.hover {
            background: pink;
            .item-list {
              display: block;
            }
          }
        }
      }


    }
  }
}
</style>